<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiaomi</title>
</head>
<style>
    /* 清除默认样式 */
    *{
        margin: 0;
        padding: 0;
    }
    .baba{
        display: flex;
        width: 1226px;
        height: 614px;
        background-color: rgb(245, 245, 245);
        /* border: 1px solid black; */
        flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;

    }
    .right{
        width: 978px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
    }
    .big ,.big img{
        width: 234px;
        height: 614px;
        /* background-color: #fff; */
        /* border: 1px solid black; */

    }

    .son{
        width: 234px;
        height: 300px;
        background-color: #fff;
        /* border: 1px solid black;    */
        
    }
    .son img{
        width: 160px;
        
    }
    .son p{        
        width: 214px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        font-size: 12px;   
    }
    .son a{
        width: 234px;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: black;
        padding: 0 10px ;
        box-sizing: border-box;
    }
    .son h3,.son span{
        font-size: 14px;
    }
    span{
        color: orangered;
        margin: 0 0px 14px;
    }
    del, p{
        color: silver;
    }
    h3{
        margin: 0 0px 2px;
    }
    p{
        margin: 0 0px 10px;
    }
    .son:hover,.big:hover{
        transform: translateY(-4px);
        transition: all 0.5s ease;
        box-shadow:
  0px 0.5px 2.2px rgba(0, 0, 0, 0.038),
  0px 1.1px 5.3px rgba(0, 0, 0, 0.052),
  0px 2.1px 10px rgba(0, 0, 0, 0.06),
  0px 3.8px 17.9px rgba(0, 0, 0, 0.064),
  0px 7.1px 33.4px rgba(0, 0, 0, 0.068),
  0px 17px 80px rgba(0, 0, 0, 0.07)
;
    }

</style>
<body>
    <div class="baba">
        <div class="big">
        <a href="" class="big">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d91bb6cf7da0947e8a6e50e03f4daf06.jpg?thumb=1&w=351&h=921&f=webp&q=90" alt="">
        </a>
        </div>
       <div class="right">
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
        <div class="son">
            <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                <h3>Redmi K60 Rro</h3>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                <span>
                    3299元起
                    <del>666元起</del>
                </span>
            </a>
        </div>
       </div>

    </div>
</body>
</html>